<template>
  <div class="irrigationArea">
    <TitleColumn name="灌区面积" isColumn />
    <div class="content">
      <div class="summary">
        <h3>
          <p>总面积</p>
          <CountTo :startVal="1" :endVal="264.47" :decimals="2" :duration="1000" />
          <em>km²</em>
        </h3>
        <h4>
          <p>耕地面积</p>
          <CountTo :startVal="1" :endVal="113.93" :decimals="2" :duration="1000" />
          <em>亩</em>
        </h4>
      </div>
      <TitleSubColumn name="各分类面积占比总和：100.12万亩" />
      <ul class="list">
        <li class="listItem">
          <section>
            <h3>有效灌溉面积</h3>
            <div class="ratio">
              <p>面积占比：14.69万亩</p>
            </div>
          </section>
          <Percentage :num="30" />
        </li>
        <li class="listItem">
          <section>
            <h3>旱涝保收保收田</h3>
            <div class="ratio">
              <p>面积占比：14.69万亩</p>
            </div>
          </section>
          <Percentage :num="80" />
        </li>
        <li class="listItem">
          <section>
            <h3>高标准农田</h3>
            <div class="ratio">
              <p>面积占比：14.69万亩</p>
            </div>
          </section>
          <Percentage :num="40" />
        </li>
        <li class="listItem">
          <section>
            <h3>有效灌溉面积</h3>
            <div class="ratio">
              <p>已完成建设：12.5万亩</p>
              <p>计划建设：1.55万亩</p>
            </div>
          </section>
          <Percentage :num="60" :num2="20" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { CountTo } from '@gui-pkg/components';
  import TitleColumn from '@/components/TitleColumn';
  import TitleSubColumn from '@/components/TitleSubColumn';
  import Percentage from './Percentage.vue';

  defineOptions({ name: 'IrrigationArea' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .irrigationArea {
    width: 50%;
    .content {
      width: 100%;
      height: calc(100% - 28px);
      background: #02123433;
      backdrop-filter: blur(10px);
      .summary {
        width: 282px;
        height: 30px;
        background: url(./images/data_bg.png) no-repeat;
        background-size: contain;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        h3 {
          display: flex;
          align-items: center;
          color: #fff;
          width: 140px;
          padding-left: 10px;
          p {
            font-size: 12px;
            margin-right: 4px;
          }
          span {
            font-weight: bold;
            font-size: 14px;
            transform: scaleY(1.1);
          }
          em {
            font-size: 12px;
            margin-left: 6px;
          }
        }
        h4 {
          display: flex;
          align-items: center;
          color: #fff;
          width: 140px;
          padding-left: 16px;
          padding-top: 8px;
          p {
            font-size: 11px;
            margin-right: 4px;
          }
          span {
            font-weight: bold;
            font-size: 13px;
            transform: scaleY(1.1);
          }
          em {
            font-size: 11px;
            margin-left: 6px;
          }
        }
      }
      ::v-deep(.titleSubColumn .titleName) {
        width: 100%;
      };
      ul.list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        li.listItem {
          width: 320px;
          height: 52px;
          padding: 6px 6px 6px 6px;
          border: 0px 0px 1px 0px;
          background: linear-gradient(360deg, rgba(6, 183, 253, 0.15) 0%, rgba(6, 183, 253, 0) 100%);
          section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            h3 {
              color: #fff;
              font-size: 14px;
              font-family: Title;
              line-height: 14px;
              font-weight: normal;
              margin-bottom: 8px;
            }
            .ratio {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              p {
                color: #B4DFFF;
                font-size: 10px;
                margin-left: 10px;
                display: flex;
                align-items: center;
                &::before {
                  content: '';
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 2px;
                  box-shadow: 0px 0px 12px 0px #06B7FD inset;
                  margin-right: 6px;
                }
              }
              p:nth-child(2) {
                color: #B4DFFF;
                font-size: 10px;
                margin-left: 4px;
                display: flex;
                align-items: center;
                &::before {
                  content: '';
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 2px;
                  box-shadow: 0px 0px 8px 0px #23DF7B inset;
                  margin-right: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
